<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtdesigner-app-tutorial.qdoc -->
  <title>Creating a Qt Widget Based Application | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Creating a Qt Widget Based Application</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="qt-creator-transitions-example.html" />
  <link rel="next" href="qt-creator-accelbubble-example.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qt-creator-transitions-example.html">Creating a Qt Quick Application</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="qt-creator-accelbubble-example.html">Creating a Mobile Application</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#creating-the-text-finder-project">Creating the Text Finder Project</a></li>
<li class="level1"><a href="#filling-in-the-missing-pieces">Filling in the Missing Pieces</a></li>
<li class="level2"><a href="#designing-the-user-interface">Designing the User Interface</a></li>
<li class="level2"><a href="#completing-the-header-file">Completing the Header File</a></li>
<li class="level2"><a href="#completing-the-source-file">Completing the Source File</a></li>
<li class="level2"><a href="#creating-a-resource-file">Creating a Resource File</a></li>
<li class="level1"><a href="#compiling-and-running-your-program">Compiling and Running Your Program</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Creating a Qt Widget Based Application</h1>
<span class="subtitle"></span>
<!-- $$$creator-writing-program.html-description -->
<div class="descr"> <a name="details"></a>
<p>This tutorial describes how to use Qt Creator to create a small Qt application, Text Finder. It is a simplified version of the Qt UI Tools <a href="http://doc.qt.io/qt-5/qtuitools-textfinder-example.html">Text Finder Example</a>. The application user interface is constructed from Qt widgets by using Qt Designer. The application logic is written in C++ by using the code editor.</p>
<p class="centerAlign"><img src="images/qtcreator-textfinder-screenshot.png" alt="" /></p><a name="creating-the-text-finder-project"></a>
<h2 id="creating-the-text-finder-project">Creating the Text Finder Project</h2>
<ol class="1" type="1"><li>Select <b>File &gt; New File or Project &gt; Application &gt; Qt Widgets Application &gt; Choose</b>.<p class="centerAlign"><img src="images/qtcreator-new-qt-gui-application.png" alt="&quot;New File or Project dialog&quot;" /></p><p>The <b>Introduction and Project Location</b> dialog opens.</p>
<p class="centerAlign"><img src="images/qtcreator-intro-and-location-qt-gui.png" alt="&quot;Introduction and Project Location dialog&quot;" /></p></li>
<li>In the <b>Name</b> field, type <b>TextFinder</b>.</li>
<li>In the <b>Create in</b> field, enter the path for the project files. For example, <code>C:\Qt\examples</code>, and then click <b>Next</b> (on Windows and Linux) or <b>Continue</b> (on <a href="nolink">macOS</a>).<p>The <b>Kit Selection</b> dialog opens.</p>
<p class="centerAlign"><img src="images/qtcreator-new-project-qt-versions-qt-gui.png" alt="&quot;Kit Selection dialog&quot;" /></p></li>
<li>Select build and run <a href="creator-glossary.html#glossary-buildandrun-kit">kits</a> for your project, and click <b>Next</b> or <b>Continue</b>.<p><b>Note: </b>If only one kit is specified in <b>Tools</b> &gt; <b>Options</b> &gt; <b>Kits</b> (on Windows and Linux) or in <b>Qt Creator</b> &gt; <b>Preferences</b> &gt; <b>Kits</b> (on <a href="nolink">macOS</a>), this dialog is skipped.</p><p>The <b>Class Information</b> dialog opens.</p>
<p class="centerAlign"><img src="images/qtcreator-class-info-qt-gui.png" alt="&quot;Class Information dialog&quot;" /></p></li>
<li>In the <b>Class name</b> field, type <b>TextFinder</b> as the class name.</li>
<li>In the <b>Base class</b> list, select <b><a href="http://doc.qt.io/qt-5/qwidget.html">QWidget</a></b> as the base class type.<p><b>Note: </b>The <b>Header file</b>, <b>Source file</b> and <b>Form file</b> fields are automatically updated to match the name of the class.</p></li>
<li>Click <b>Next</b> or <b>Continue</b>.<p>The <b>Project Management</b> dialog opens.</p>
<p class="centerAlign"><img src="images/qtcreator-new-project-summary-qt-gui.png" alt="&quot;Project Management dialog&quot;" /></p></li>
<li>Review the project settings, and click <b>Finish</b> (on Windows and Linux) or <b>Done</b> (on <a href="nolink">macOS</a>) to create the project.</li>
</ol>
<p><b>Note: </b>The project opens in the <b>Edit</b> mode, and these instructions are hidden. To return to these instructions, open the <b>Help</b> mode.</p><p>The TextFinder project now contains the following files:</p>
<ul>
<li>textfinder.h</li>
<li>textfinder.cpp</li>
<li>main.cpp</li>
<li>textfinder.ui</li>
<li>textfinder.pro</li>
</ul>
<p class="centerAlign"><img src="images/qtcreator-textfinder-contents.png" alt="&quot;TextFinder project contents&quot;" /></p><p>The .h and .cpp files come with the necessary boiler plate code. The .pro file is complete.</p>
<a name="filling-in-the-missing-pieces"></a>
<h2 id="filling-in-the-missing-pieces">Filling in the Missing Pieces</h2>
<p>Begin by designing the user interface and then move on to filling in the missing code. Finally, add the find functionality.</p>
<a name="designing-the-user-interface"></a>
<h3 id="designing-the-user-interface">Designing the User Interface</h3>
<p class="centerAlign"><img src="images/qtcreator-textfinder-ui.png" alt="&quot;Text Finder UI&quot;" /></p><ol class="1" type="1"><li>In the <b>Editor</b> mode, double-click the textfinder.ui file in the <b>Projects</b> view to launch the integrated Qt Designer.</li>
<li>Drag and drop the following widgets to the form:<ul>
<li><b>Label</b> (<a href="http://doc.qt.io/qt-5/qlabel.html">QLabel</a>)</li>
<li><b>Line Edit</b> (<a href="http://doc.qt.io/qt-5/qlineedit.html">QLineEdit</a>)</li>
<li><b>Push Button</b> (<a href="http://doc.qt.io/qt-5/qpushbutton.html">QPushButton</a>)</li>
</ul>
<p class="centerAlign"><img src="images/qtcreator-textfinder-ui-widgets.png" alt="&quot;Adding widgets to Text Finder UI&quot;" /></p><p><b>Note: </b>To easily locate the widgets, use the search box at the top of the <b>Sidebar</b>. For example, to find the <b>Label</b> widget, start typing the word <b>label</b>.</p><p class="centerAlign"><img src="images/qtcreator-texfinder-filter.png" alt="&quot;Filter field&quot;" /></p></li>
<li>Double-click the <b>Label</b> widget and enter the text <b>Keyword</b>.</li>
<li>Double-click the <b>Push Button</b> widget and enter the text <b>Find</b>.</li>
<li>In the <b>Properties</b> pane, change the <b>objectName</b> to <b>findButton</b>.<p class="centerAlign"><img src="images/qtcreator-textfinder-objectname.png" alt="&quot;Changing object names&quot;" /></p></li>
<li>Press <b>Ctrl+A</b> (or <b>Cmd+A</b>) to select the widgets and click <b>Lay out Horizontally</b> (or press <b>Ctrl+H</b> on Linux or Windows or <b>Ctrl+Shift+H</b> on <a href="nolink">macOS</a>) to apply a horizontal layout (<a href="http://doc.qt.io/qt-5/qhboxlayout.html">QHBoxLayout</a>).<p class="centerAlign"><img src="images/qtcreator-texfinder-ui-horizontal-layout.png" alt="&quot;Applying horizontal layout&quot;" /></p></li>
<li>Drag and drop a <b>Text Edit</b> widget (<a href="http://doc.qt.io/qt-5/qtextedit.html">QTextEdit</a>) to the form.</li>
<li>Select the screen area and click <b>Lay out Vertically</b> (or press <b>Ctrl+L</b>) to apply a vertical layout (<a href="http://doc.qt.io/qt-5/qvboxlayout.html">QVBoxLayout</a>).<p class="centerAlign"><img src="images/qtcreator-textfinder-ui.png" alt="&quot;Text Finder UI&quot;" /></p><p>Applying the horizontal and vertical layouts ensures that the application UI scales to different screen sizes.</p>
</li>
<li>To call a find function when users press the <b>Find</b> button, you use the Qt signals and slots mechanism. A signal is emitted when a particular event occurs and a slot is a function that is called in response to a particular signal. Qt widgets have predefined signals and slots that you can use directly from Qt Designer. To add a slot for the find function:<ul>
<li>Right-click the <b>Find</b> button to open a context-menu.</li>
<li>Select <b>Go to Slot &gt; clicked()</b>, and then select <b>OK</b>.<p>A private slot, <code>on_findButton_clicked()</code>, is added to the header file, textfinder.h and a private function, <code>TextFinder::on_findButton_clicked()</code>, is added to the source file, textfinder.cpp.</p>
</li>
</ul>
</li>
<li>Press <b>Ctrl+S</b> (or <b>Cmd+S</b>) to save your changes.</li>
</ol>
<p>For more information about designing forms with Qt Designer, see the <a href="http://doc.qt.io/qt-5/qtdesigner-manual.html">Qt Designer Manual</a>.</p>
<a name="completing-the-header-file"></a>
<h3 id="completing-the-header-file">Completing the Header File</h3>
<p>The textfinder.h file already has the necessary #includes, a constructor, a destructor, and the <code>Ui</code> object. You need to add a private function, <code>loadTextFile()</code>, to read and display the contents of the input text file in the <a href="http://doc.qt.io/qt-5/qtextedit.html">QTextEdit</a>.</p>
<ol class="1" type="1"><li>In the <b>Projects</b> pane in the <b>Edit view</b>, double-click the <code>textfinder.h</code> file to open it for editing.</li>
<li>Add a private function to the <code>private</code> section, after the <code>Ui::TextFinder</code> pointer, as illustrated by the following code snippet:<pre class="cpp">

  <span class="keyword">private</span> <span class="keyword">slots</span>:
      <span class="type">void</span> on_findButton_clicked();

  <span class="keyword">private</span>:
      Ui<span class="operator">::</span>TextFinder <span class="operator">*</span>ui;
      <span class="type">void</span> loadTextFile();

</pre>
</li>
</ol>
<a name="completing-the-source-file"></a>
<h3 id="completing-the-source-file">Completing the Source File</h3>
<p>Now that the header file is complete, move on to the source file, textfinder.cpp.</p>
<ol class="1" type="1"><li>In the <b>Projects</b> pane in the <b>Edit</b> view, double-click the textfinder.cpp file to open it for editing.</li>
<li>Add code to load a text file using <a href="http://doc.qt.io/qt-5/qfile.html">QFile</a>, read it with <a href="http://doc.qt.io/qt-5/qtextstream.html">QTextStream</a>, and then display it on <code>textEdit</code> with <a href="http://doc.qt.io/qt-5/qtextedit.html#setPlainText">QTextEdit::setPlainText</a>(). This is illustrated by the following code snippet:<pre class="cpp">

  <span class="type">void</span> TextFinder<span class="operator">::</span>loadTextFile()
  {
      <span class="type"><a href="http://doc.qt.io/qt-5/qfile.html">QFile</a></span> inputFile(<span class="string">&quot;:/input.txt&quot;</span>);
      inputFile<span class="operator">.</span>open(<span class="type"><a href="http://doc.qt.io/qt-5/qiodevice.html">QIODevice</a></span><span class="operator">::</span>ReadOnly);

      <span class="type"><a href="http://doc.qt.io/qt-5/qtextstream.html">QTextStream</a></span> in(<span class="operator">&amp;</span>inputFile);
      <span class="type"><a href="http://doc.qt.io/qt-5/qstring.html">QString</a></span> line <span class="operator">=</span> in<span class="operator">.</span>readAll();
      inputFile<span class="operator">.</span>close();

      ui<span class="operator">-</span><span class="operator">&gt;</span>textEdit<span class="operator">-</span><span class="operator">&gt;</span>setPlainText(line);
      <span class="type"><a href="http://doc.qt.io/qt-5/qtextcursor.html">QTextCursor</a></span> cursor <span class="operator">=</span> ui<span class="operator">-</span><span class="operator">&gt;</span>textEdit<span class="operator">-</span><span class="operator">&gt;</span>textCursor();
      cursor<span class="operator">.</span>movePosition(<span class="type"><a href="http://doc.qt.io/qt-5/qtextcursor.html">QTextCursor</a></span><span class="operator">::</span>Start<span class="operator">,</span> <span class="type"><a href="http://doc.qt.io/qt-5/qtextcursor.html">QTextCursor</a></span><span class="operator">::</span>MoveAnchor<span class="operator">,</span> <span class="number">1</span>);
  }

</pre>
</li>
<li>To use <a href="http://doc.qt.io/qt-5/qfile.html">QFile</a> and <a href="http://doc.qt.io/qt-5/qtextstream.html">QTextStream</a>, add the following #includes to textfinder.cpp:<pre class="cpp">

  <span class="preprocessor">#include &lt;QFile&gt;</span>
  <span class="preprocessor">#include &lt;QTextStream&gt;</span>

</pre>
</li>
<li>For the <code>on_findButton_clicked()</code> slot, add code to extract the search string and use the <a href="http://doc.qt.io/qt-5/qtextedit.html#find">QTextEdit::find</a>() function to look for the search string within the text file. This is illustrated by the following code snippet:<pre class="cpp">

  <span class="type">void</span> TextFinder<span class="operator">::</span>on_findButton_clicked()
  {
      <span class="type"><a href="http://doc.qt.io/qt-5/qstring.html">QString</a></span> searchString <span class="operator">=</span> ui<span class="operator">-</span><span class="operator">&gt;</span>lineEdit<span class="operator">-</span><span class="operator">&gt;</span>text();
      ui<span class="operator">-</span><span class="operator">&gt;</span>textEdit<span class="operator">-</span><span class="operator">&gt;</span>find(searchString<span class="operator">,</span> <span class="type"><a href="http://doc.qt.io/qt-5/qtextdocument.html">QTextDocument</a></span><span class="operator">::</span>FindWholeWords);
  }

</pre>
</li>
<li>Once both of these functions are complete, add a line to call <code>loadTextFile()</code> in the constructor, as illustrated by the following code snippet:<pre class="cpp">

  TextFinder<span class="operator">::</span>TextFinder(<span class="type"><a href="http://doc.qt.io/qt-5/qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
      : <span class="type"><a href="http://doc.qt.io/qt-5/qwidget.html">QWidget</a></span>(parent)<span class="operator">,</span> ui(<span class="keyword">new</span> Ui<span class="operator">::</span>TextFinder)
  {
      ui<span class="operator">-</span><span class="operator">&gt;</span>setupUi(<span class="keyword">this</span>);
      loadTextFile();
  }

</pre>
</li>
</ol>
<p>The <code>on_findButton_clicked()</code> slot is called automatically in the uic generated ui_textfinder.h file by this line of code:</p>
<pre class="cpp">

  <span class="type"><a href="http://doc.qt.io/qt-5/qmetaobject.html">QMetaObject</a></span><span class="operator">::</span>connectSlotsByName(TextFinder);

</pre>
<a name="creating-a-resource-file"></a>
<h3 id="creating-a-resource-file">Creating a Resource File</h3>
<p>You need a resource file (.qrc) within which you embed the input text file. The input file can be any .txt file with a paragraph of text. Create a text file called input.txt and store it in the textfinder folder.</p>
<p>To add a resource file:</p>
<ol class="1" type="1"><li>Select <b>File &gt; New File or Project &gt; Qt &gt; Qt Resource File &gt; Choose</b>.<p class="centerAlign"><img src="images/qtcreator-add-resource-wizard.png" alt="&quot;New File or Project dialog&quot;" /></p><p>The <b>Choose the Location</b> dialog opens.</p>
<p class="centerAlign"><img src="images/qtcreator-add-resource-wizard2.png" alt="&quot;Choose the Location dialog&quot;" /></p></li>
<li>In the <b>Name</b> field, enter <b>textfinder</b>.</li>
<li>In the <b>Path</b> field, enter <code>C:\Qt\examples\TextFinder</code>, and click <b>Next</b> or <b>Continue</b>.<p>The <b>Project Management</b> dialog opens.</p>
<p class="centerAlign"><img src="images/qtcreator-add-resource-wizard3.png" alt="&quot;Project Management dialog&quot;" /></p></li>
<li>In the <b>Add to project</b> field, select <b>TextFinder.pro</b> and click <b>Finish</b> or <b>Done</b> to open the file in the code editor.</li>
<li>Select <b>Add &gt; Add Prefix</b>.</li>
<li>In the <b>Prefix</b> field, replace the default prefix with a slash (/).</li>
<li>Select <b>Add &gt; Add Files</b>, to locate and add input.txt.<p class="centerAlign"><img src="images/qtcreator-add-resource.png" alt="&quot;Editing resource files&quot;" /></p></li>
</ol>
<a name="compiling-and-running-your-program"></a>
<h2 id="compiling-and-running-your-program">Compiling and Running Your Program</h2>
<p>Now that you have all the necessary files, click the <img src="images/run_small.png" alt="" /> button to compile and run your program.</p>
</div>
<!-- @@@creator-writing-program.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qt-creator-transitions-example.html">Creating a Qt Quick Application</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="qt-creator-accelbubble-example.html">Creating a Mobile Application</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
